<template>
  <div>
    <min-bread :bread="bread"></min-bread>
    <min-card :card="card" v-if="idAdmin"></min-card>
    <min-card :card="cardTwo"></min-card>
    <!-- <el-card class="box-card">
      <h6>统计数据</h6>
      <div class="disflex" style="height:280px;">
        <div id="myChart" :style="{width: '100%', height: '100%'}"></div>
      </div>
    </el-card>-->
    <el-card class="box-card">
      <div class="disflex" style="height:500px;">
        <div id="glChart" :style="{width: '100%', height: '100%'}"></div>
      </div>
    </el-card>
  </div>
</template>
<script>
import flights from "./../../../static/js/flights.json";
export default {
  data() {
    return {
      bread: {
        subTitle: "首页统计"
      },
      idAdmin: false, // 显示
      card: {
        title: "用户数据",
        numOne: 10000,
        numTwo: 1000,
        titleOne: "用户(总)数",
        titleTwo: "当月新增用户数",
        iconOne: "iconCP_yonghushu",
        iconTwo: "iconCP_xinzeng"
      },
      cardTwo: {
        title: "资源数据",
        numOne: 999999,
        numTwo: 8888,
        titleOne: "总资源频段",
        titleTwo: "使用中资源频段",
        iconOne: "iconCP_yonghushu",
        iconTwo: "iconCP_dangyue"
      }
    };
  },
  created() {
    if (sessionStorage.getItem("role") === "admin") {
      this.idAdmin = true;
    } else {
      this.idAdmin = false;
    }
  },
  mounted() {
    // this.drawLine();
    this.drawGl();
  },
  methods: {
    drawGl() {
      let glChart = this.$echarts.init(document.getElementById("glChart"));
      function getAirportCoord(idx) {
        return [flights.airports[idx][3], flights.airports[idx][4]];
      }
      var routes = flights.routes.map(function(airline) {
        return [getAirportCoord(airline[1]), getAirportCoord(airline[2])];
      });
      glChart.setOption({
        geo3D: {
          map: "china",
          shading: "realistic",
          silent: true,
          environment: "#222",
          realisticMaterial: {
            roughness: 0.8,
            metalness: 0
          },
          postEffect: {
            enable: true
          },
          groundPlane: {
            show: false
          },
          light: {
            main: {
              intensity: 1,
              alpha: 30
            },
            ambient: {
              intensity: 0
            }
          },
          viewControl: {
            distance: 70,
            alpha: 89,

            panMouseButton: "left",
            rotateMouseButton: "right"
          },
          regions: flights.regions,
          itemStyle: {
            // areaColor: "#23238e"
          }
        },
        series: [
          {
            type: "lines3D",

            coordinateSystem: "geo3D",

            effect: {
              show: true,
              trailWidth: 4,
              trailOpacity: 1,
              trailLength: 0.5,
              trailColor: "#ff2400",
              period: 20,
              constantSpeed: 5
            },

            blendMode: "lighter",

            lineStyle: {
              width: 0.5,
              opacity: 0.2
            },

            data: routes
          }
        ]
      });
    },
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      // 绘制图表
      myChart.setOption({
        title: {
          // text: "阶梯瀑布图",
          subtext: "From ExcelHome",
          sublink: "http://e.weibo.com/1341556070/Aj1J2x5a5"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: function(params) {
            var tar;
            if (params[1].value !== "-") {
              tar = params[1];
            } else {
              tar = params[0];
            }
            return tar.name + "<br/>" + tar.seriesName + " : " + tar.value;
          }
        },
        legend: {
          data: ["总用户", "借用用户"]
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: {
          type: "category",
          splitLine: { show: false },
          data: (function() {
            var list = [];
            for (var i = 1; i <= 11; i++) {
              list.push("11月" + i + "日");
            }
            return list;
          })()
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            name: "使用资源",
            type: "bar",
            stack: "总量",
            itemStyle: {
              barBorderColor: "rgba(0,0,0,0)",
              color: "rgba(0,0,0,0)"
            },
            emphasis: {
              itemStyle: {
                barBorderColor: "rgba(0,0,0,0)",
                color: "rgba(0,0,0,0)"
              }
            },
            data: [0, 900, 1245, 1530, 1376, 1376, 1511, 1689, 1856, 1495, 1292]
          },
          {
            name: "借用用户",
            type: "bar",
            stack: "总量",
            label: {
              show: true,
              position: "top"
            },
            data: [900, 345, 393, "-", "-", 135, 178, 286, "-", "-", "-"]
          },
          {
            name: "总用户",
            type: "bar",
            stack: "总量",
            label: {
              show: true,
              position: "bottom"
            },
            data: ["-", "-", "-", 108, 154, "-", "-", "-", 119, 361, 203]
          }
        ]
      });
    }
  }
};
</script>
<style scoped>
.dr_circle {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(236, 92, 5, 1);
  margin-right: 10px;
}
.dr_lh {
  height: 40px;
}
.dr_ch {
  margin-top: 60px;
}
</style>
